<template>
	<view class="partyEntranceWp">
		<view class="topWp">
			<view class="newParty" @tap="goTo('/pagesParty/party/newParty/newParty')">
				<view class="textWp">
					开新局
				</view>
			</view>
		</view>
		<view class="main">
			<!-- 待参加 和 历史组局 -->
			<scroll-view class="tabsWp" scroll-x="true" @scroll="scrollPartyItem">
				<view class="scrollPartyItem "
					@click="goTo('/pagesParty/party/lastPartyMemberList/lastPartyMemberList')">
					<view class="scrollPartyItemBox item1">
						<view class="imgWp">
							<img src="https://file.casugn.com/storecompcard//s8XniINMMRdK3881becc38bb8e3d75a01fad075bfd44_1668392087341.png"
								alt="">
						</view>
						<view class="text">
							近期约饭
						</view>
					</view>

				</view>
				<view class="scrollPartyItem" @click="goTo('/pagesParty/party/publishedParty/publishedParty')">
					<view class="scrollPartyItemBox  item2">
						<view class="imgWp">
							<img src="https://file.casugn.com/storecompcard//Mv2753PQfgah3a1b3dcb6974b952d8ec372bafc3e728_1668392120709.png"
								alt="">
						</view>
						<view class="text">
							已发布
						</view>
					</view>
				</view>
				<view class="scrollPartyItem " @click="goTo('/pagesParty/party/partyHistory/partyHistory')">
					<view class="scrollPartyItemBox item3">
						<view class="imgWp">
							<img src="https://file.casugn.com/storecompcard//gDBA61guRUvJ0b27ae349300fdb7f6d1df3846e865ec_1668392103028.png"
								alt="">
						</view>
						<view class="text">
							历史组局
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="sendPartyWp">
				<view class="headWp">
					<view class="sendPartyTitleWp">
						待参加
					</view>
					<view class="selectWp">
						<view class="left" @click.stop="chooseTime">
							<view class="switch">
								{{month}}月
							</view>
							<view class="iconWp">
								<u-icon name="arrow-down-fill"></u-icon>
							</view>
						</view>
						<view class="right" @click.stop="switchClick">
							<view class="switch">
								{{switchValue}}
							</view>
							<view class="iconWp">
								<u-icon name="arrow-down-fill"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="partyItemWp">
					<u-empty v-if="partyList.length==0" :width='320' :height="320" :textSize='32' :marginTop='30'>
					</u-empty>
					<partyList :list="partyList " :isShow="true" @handleItem='handlePartyListItem' canTalk="isJoin">
					</partyList>
				</view>
			</view>
		</view>
		<view class="fixedWp" @click.stop="goTo('/pagesParty/party/sendParty/sendParty')">
			<view class="fabBtn">
				<view class="badgeImgWp">
					<img class="icons"
						src="https://file.casugn.com/storecompcard//tehSrVmp0DMTcc78265057ed5cee2ee3cf32a75b92a6_1668392061697.png"
						alt="草稿箱">
					<view class="text">
						草稿箱
					</view>
					<view class="badgeNumber" v-if="editPartyNum>0">{{editPartyNum}}</view>
				</view>
			</view>

		</view>

		<u-picker :show="switchShow" :columns="columns" keyName="label" @close="switchShow=false" closeOnClickOverlay
			@change="changeSwitch" @cancel="switchShow=false" @confirm="switchConfirm" :defaultIndex="[0]"></u-picker>
		<u-datetime-picker :show="showPicker" v-model="pickerTime" mode="year-month" closeOnClickOverlay
			@confirm="confirmTime" @cancel="closePicker" @change="changeHandler" @close="closePicker">
		</u-datetime-picker>
		<u-popup :show="model" @close="model=false" :round="20">
			<view class="delModelWp">
				<view class="partyDetail">
					<view class="labelWp">
						<view class="titleWp">
							<view class="title3">主题：</view>
							<view class="content">
								{{partyInfoItem.title}}
							</view>
						</view>
					</view>
					<view class="labelWp" @click.stop="goToFriendMainPage(partyInfoItem.initiatorId)">
						<view class="titleWp">
							<view class="title3">发起人：</view>
							<view class="content">
								{{partyInfoItem.initiator}}
							</view>
						</view>
					</view>
					<view class="labelWp">
						<view class="titleWp">
							<view class="title3">时间：</view>
							<view class="content">
								{{partyInfoItem.startTime}}
							</view>
						</view>
					</view>
					<view class="labelWp" @click.stop="goToMap2(partyInfoItem.address)">
						<view class="titleWp">
							<view class="title3">导航</view>
							<view class="content">
								{{partyInfoItem.addressName}}
							</view>
							<view class="imgWp">
								<img src="https://file.casugn.com/storecompcard/temp/位置 (2) 拷贝@2x_1656472904469.png"
									alt="">
							</view>
						</view>
					</view>
				</view>
				<view class="btnWp" v-if="partyInfoItem.initiatorId!=userInfo.openId">
					<view class="buttonWp">
						<u-button @click="refuseParty" type="primary" shape="circle" color="#fc6769" text="拒绝">
						</u-button>
					</view>
					<view class="buttonWp">
						<u-button @click="confirmParty" type="primary" shape="circle" color="#41a5ff" text="参加">
						</u-button>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseConfig from '@/config/baseUrl.js'
	import partyList from '@/pagesParty/components/partyList/partyList.vue'
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		components: {
			partyList
		},
		data() {
			return {
				partyList: [],
				queryTime: null,
				pageNo: 1,
				total: 0,
				pageSize: 20,
				month: '',
				showPicker: false,
				pickerTime: Number(new Date()),
				editPartyNum: 0,
				partakeStatus: '', //0未处理，1已参加，2已拒绝
				switchShow: false, //
				columns: [
					[{
							label: '全部',
							id: ''
						},
						{
							label: '未处理',
							id: 0
						},
						{
							label: '已同意',
							id: 1
						}, {
							label: '已拒绝',
							id: 2
						}

					]
				],
				switchValue: '全部',
				switchId: '',
				model: false,
				partyInfoItem: {}


			}
		},

		computed: {
			...mapGetters(['userInfo']),
			...mapState(['isCheckingType']),
		},
		created() {
			this.nowTime()
		},
		onReachBottom() {
			// picker遮罩出现时禁止下拉加载
			if (this.switchShow) {
				return
			}
			if (this.total <= this.pageNo * this.pageSize) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
				return
			} else {
				this.pageNo++
				this.queryPartyList()
			}

		},
		onShow() {
			this.resetList()
			this.getNumberJoinPartyAndEdit()
		},
		//下拉刷新状态
		onPullDownRefresh() {
			this.partakeStatus = ''
			this.nowTime()
			this.resetList()
		},
		methods: {
			//获取草稿箱和待参加数量
			async getNumberJoinPartyAndEdit() {
				let payload = {
					openId: this.userInfo.openId
				}
				let res = await this.$api.getNumberJoinPartyAndEdit(payload)
				if (res.success && res.result) {
					console.log(res.result, '获取草稿箱和待参加数量');
					this.editPartyNum = res.result.releaseGroup
				} else {
					this.editPartyNum = 0
				}
			},
			//滚动事件
			scrollPartyItem({
				detail
			}) {
				//console.log(detail, 'detail ');
			},
			goTo(url) {
				const pageNum = getCurrentPages()
				console.log('navigateTo pageNum: ', pageNum.length)
				if (pageNum.length > 9) {
					//当打开10个页面时，用redirectTo
					uni.redirectTo({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			resetList() {
				this.partakeStatus = ''
				this.partyList = []
				this.total = 0
				this.pageNo = 1
				this.queryPartyList()
			},
			switchClick() {
				this.switchShow = true
			},
			// 确定选择状态
			switchConfirm(val) {
				this.switchShow = false
				console.log(val.value[0])
				this.switchValue = val.value[0].label
				this.partakeStatus = val.value[0].id
				this.partyList = []
				this.total = 0
				this.pageNo = 1
				this.queryPartyList()
			},
			//状态改变
			changeSwitch(val) {
				console.log(val, '状态改变');
				this.switchValue = val.value[0].label
				this.partakeStatus = val.value[0].id
			},
			//获取当月时间
			nowTime() {
				let now = new Date();
				this.month = now.getMonth() + 1
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(now, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//选择时间
			chooseTime() {
				this.showPicker = true
			},
			closePicker() {
				this.showPicker = false
			},
			//时间选择改变
			changeHandler(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//点击列表项
			handlePartyListItem({
				item,
				index
			}) {
				console.log(item, '点击列表项Item');
				this.partyInfoItem = item
				this.model = true
			},
			//确认时间
			confirmTime(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				let aa = str.split('-')[1].split("")
				if (aa[0] == 0) {
					this.month = aa[1]
				} else {
					this.month = aa[0] + aa[1]
				}
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
				this.showPicker = false
				this.switchValue = '全部'
				this.partakeStatus = ''
				this.resetList()
			},
			// 查詢列表信息
			async queryPartyList() {
				uni.showLoading({
					title: '加载中'
				})
				let payload = {
					category: 0, //全部
					date: this.queryTime,
					openId: this.userInfo.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: this.partakeStatus //0 未处理1 参加2 拒绝
				}
				let res = await this.$api.queryWaitGroupPage(payload) //待参加
				if (res.success && res.result.records.length > 0) {
					console.log(res.result.records);
					this.partyList = [...this.partyList, ...res.result.records]
					this.total = res.result.total
				} else {
					uni.showToast({
						title: '未查询到相应数据',
						icon: 'none'
					});
					this.partyList = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			showModel({
				item,
				index
			}) {
				this.selectItem = {
					item,
					index
				}
				this.model = false
			},
			//确认参加
			async confirmParty() {
				let payload = {
					openId: this.userInfo.openId,
					groupId: this.partyInfoItem.id,
					status: 1 //待处理、同意、拒绝   status 是  0 1  2   
				}
				let res = await this.$api.handleGroupMembers(payload)
				if (res.success) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.model = false

					this.partyList = []
					this.total = 0
					this.pageNo = 1
					this.queryPartyList()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.model = false
				}

			},
			//拒绝 参加
			async refuseParty() {
				let payload = {
					openId: this.userInfo.openId,
					groupId: this.partyInfoItem.id,
					status: 2 //待处理、同意、拒绝   status 是  0 1  2   
				}
				let res = await this.$api.handleGroupMembers(payload)
				if (res.success) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.model = false
					this.partyList = []
					this.total = 0
					this.pageNo = 1
					this.queryPartyList()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.model = false
				}

			},
			//调用微信插件看路线
			goToMap(address) {
				console.log(address, '导航信息');
				let plugin = requirePlugin('routePlan');
				const key = baseConfig.mapData.mapKey; //使用在腾讯位置服务申请的key
				const referer = baseConfig.mapData.appName //调用插件的app的名称
				let endPoint = JSON.stringify(address) || ''
				if (endPoint.length < 1) {
					return uni.showToast({
						title: '用户未设置坐标信息',
						icon: 'none'
					});
				}
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			//调用手机导航
			goToMap2(data) {
				console.log(data, '导航信息');
				let {
					latitude,
					longitude,
					name,
					address
				} = data
				if (latitude && longitude) {
					uni.openLocation({
						latitude: Number(latitude),
						longitude: Number(longitude),
						name: name,
						scale: 17,
						address: address,
						success: () => {
							console.log('success');
							this.model = false
						}
					});
				} else {
					uni.showToast({
						title: '地址数据有误',
						icon: 'none'
					});
				}


			},
			//查看好友主页
			async goToFriendMainPage(openId) {
				this.model = false
				let res = await this.$api.queryCurrentCardByOpenId({
					openId
				})
				if (res.success) {
					let cardId = res.result.id
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${cardId}`
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			}


		},

	}
</script>

<style lang="scss">
	.partyEntranceWp {

		.topWp {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			.newParty {
				width: 700rpx;
				height: 300rpx;
				margin: 30rpx;
				background-image: url('https://file.casugn.com/storecompcard//ARnQxrRpeLdi40bcc452c87113f16c6b8a5db032c297_1663228112138.png');
				/* 背景图垂直、水平均居中 */
				background-position: center center;
				/* 背景图不平铺 */
				background-repeat: no-repeat;
				/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
				/* 让背景图基于容器大小伸缩 */
				background-size: 100% 100%;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 10px 10px -3px #45a7fc;
				margin-bottom: 50rpx;


				.textWp {
					color: #fff;
					font-weight: 900;
					font-size: 50rpx;
					text-shadow: 1px 1px #ccc;
					text-align: center;
				}

			}
		}

		.main {
			.tabsWp {
				overflow: scroll;
				white-space: nowrap;
				display: flex;
				align-items: center;
				height: 260rpx;



				.scrollPartyItem {
					&:nth-child(1) {
						margin-left: 30rpx !important;
						background-image: linear-gradient(0deg, #41A5FF 0%, #85C7FF 100%);
						box-shadow: 0 10px 10px -3px #A7D5FF;
					}

					&:nth-child(2) {
						background-image: linear-gradient(0deg, #0FC2E9 0%, #82E6FE 100%);
						box-shadow: 0 10px 10px -3px #7fe4fb;
					}

					&:nth-child(3) {
						background-image: linear-gradient(0deg, #27D6A3 0%, #64FAD2 100%);
						box-shadow: 0 10px 10px -3px #9AECD4;
					}

					display: inline-block;
					width: 240rpx;
					height: 220rpx;

					text-shadow: 1px 1px #ccc;
					text-align: center;

					border-radius: 10rpx;
					margin: 0rpx 30rpx 10rpx 0;



					.scrollPartyItemBox {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: 100%;
						height: 100%;
						color: #fff;
						font-weight: 500;
						font-size: 30rpx;
						margin-top: -16rpx;



						.imgWp {

							text-align: center;
							width: 124rpx;
							height: 124rpx;
							display: flex;
							justify-content: center;

							img {
								width: 100%;
								height: 100%;
							}

						}

						.text {}
					}

				}

			}

			.sendPartyWp {
				height: 100vh;
				background-color: #F8F9FF;

				.headWp {
					background-color: #fff;
					padding-bottom: 0rpx;
					overflow: hidden;

					.sendPartyTitleWp {
						text-align: center;
						font-size: 36rpx;
						font-weight: 900;
					}

					.selectWp {

						margin: 30rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left,
						.right {
							border-radius: 20rpx;
							background-color: #eee;
							padding: 10rpx 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.switch {
								color: #333333;
								font-size: 28rpx;
							}
						}
					}



				}



				.tabBarWp {
					padding-top: 40upx;
				}

				.partyItemWp {
					margin: 30upx;
					padding-bottom: 30upx;
				}

			}

		}

		.fixedWp {
			z-index: 999;

			.fabBtn {
				position: fixed;
				bottom: 20vh;
				right: 50upx;



				.badgeImgWp {
					width: 110upx;
					height: 110upx;
					margin: 0 auto;
					position: relative;
					background: rgba(60, 124, 254, 0.68);
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					flex-direction: column;

					.icons {
						width: 40upx;
						height: 40upx;
					}

					.text {
						padding-top: 5rpx;
						font-size: 20rpx;
						color: #fff;
					}


					.badgeNumber {
						text-align: center;
						width: 32upx;
						height: 32upx;
						background-color: red;
						color: #fff;
						border-radius: 50%;
						position: absolute;
						font-size: 22upx;
						line-height: 32upx;
						top: -4upx;
						right: -16upx;
					}
				}

			}

		}
	}

	//弹窗

	.delModelWp {
		padding: 30upx;

		.partyDetail {
			position: relative;
			margin: 30upx;
			padding: 30upx;

			// display: flex;
			// align-items: center;
			background: rgba(66, 60, 254, 0.05);
			// box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
			border-radius: 30upx;

			.part-status {
				position: absolute;
				transform: rotate(30deg);
				top: 6rpx;
				right: 0upx;
				color: #666666;
				font-size: 26upx;
			}

			.ccc {
				color: #666666;
			}

			.red {
				color: red;
			}

			.blue {
				color: #423CFE;
			}


			.labelWp {
				margin: 40upx 0upx;
				display: flex;
				align-items: center;



				.titleWp {
					display: flex;
					align-items: center;

					.title3 {
						font-size: 28rpx;
						width: 120rpx;
						font-weight: 600;
						margin-right: 20rpx;
					}

					.content {
						flex: 1;
						font-size: 26upx;
						color: #333333;
					}

					.imgWp {
						margin-left: 40upx;
						width: 40upx;
						height: 40upx;

						img {
							width: 40upx;
							height: 40upx;
						}
					}
				}


			}
		}

		.btnWp {
			display: flex;
			justify-content: space-around;

			.buttonWp {
				width: 80%;
				margin: 0 30rpx;
			}
		}

		.delWp {
			border-top: 1upx solid #eee;

			.title {
				text-align: center;
				font-size: 26upx;
				font-weight: 400;
				color: #333333;
				padding: 30upx 0;
				border-bottom: 1upx solid #eee;
			}

			.moreBtnWp {
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border: none;
				box-shadow: none;

				.deltext {
					text-align: center;
					flex: 1;
					font-weight: 400;
					border-right: 1upx solid #eee;
					color: #333333;
					font-size: 24upx;
					font-weight: 400;
					color: red;
				}

				.cancel {
					text-align: center;
					flex: 1;
					font-size: 24upx;
					font-weight: 400;
					color: #423CFE;
				}
			}
		}
	}
</style>
